<template>
	<view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-mauve cur':''" v-for="(item,index) in deal"
					:key="index" @tap="tabSelect" :data-id="index">
					{{item.title}}
				</view>
			</view>
		</scroll-view>
		<view class="search">
			<view class="cu-bar bg-white search">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="输入机台号" v-model="queryParams.devNum" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-mauve shadow-blur round" @click="searchTroubles()">搜索</button>
				</view>
			</view>
		</view>
		<u-empty v-if="troubles.length===0" icon="https://fziot.zheyun.top:9021/static/image/empty/data.png"></u-empty>
		<view class="topInfo baseBack align-center" v-for="item in troubles">
			<view class="flex padding-top-sm">
				<text style="color:#AC58FA;margin-left: 20rpx;"> 机台号：</text>
				<view style="font-size: 35rpx; margin-right: auto;margin-left: 10rpx;">{{ item.devNum }}</view>
				<view style="width: 30%;"> {{parseTrouble(item.troubleType) }}</view>
			</view>

			<view class="flex padding-bottom-sm">
				<view style="margin-right: auto;">
					<text class="timeInfo">{{ item.beginTime }} —— {{ item.endTime?item.endTime :'待处置' }}</text>
				</view>
			</view>

		</view>
		<uni-load-more :status="status"></uni-load-more>
		<watermark :text="companyName"></watermark>
	</view>
</template>

<script>
	import watermark from 'components/warter/watermark.vue'
	import moment from 'moment'
	import {
		troubleList
	} from '@/api/trouble/trouble.js'

	export default {
		components: {
			watermark
		},
		data() {
			return {
				deal: [{
					title: "全部"
				}, {
					title: "待处置"
				}, {
					title: "已处置"
				}],
				TabCur: 0,
				scrollLeft: 0,
				status: "more",
				companyName: this.$store.getters.name,
				troubles: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					status: 0,
					devNum: null,
					userId: this.$store.getters.userId,
					companyId: this.$store.getters.companyId,
				},
				count: 0,
			}
		},
		mounted() {
			this.getTroubles()
		},
		onPullDownRefresh() {
			this.queryParams.pageNum = 1;
			this.getTroubles();
		},
		onReachBottom() {
			if (this.count > this.troubles.length) {
				this.queryParams.pageNum++;
				troubleList({
					...this.queryParams
				}).then((res) => {
					this.total = res.total;
					this.troubles = _.concat(this.troubles, res.rows);
					uni.hideLoading();
					if (this.total <= this.troubles.length) {
						this.status = "no-more";
					}
				});
			} else {
				this.status = "no-more";
			}
		},
		methods: {
			parseTrouble(type) {
				switch (type) {
					case "0":
						return "上断纱"
					case "1":
						return "下断纱"
					case "2":
						return "探针"
					case "3":
						return "破布"
					case "4":
						return "缺油"
					case "5":
						return "缺气"
					case "6":
						return "安全门"
					case "7":
						return "变频"
					case "8":
						return "保险丝"
					default:
						return ""
				}
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.queryParams.status = e.currentTarget.dataset.id
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.troubles = []
				this.pageNum = 1
				this.pageSize = 10
				this.getTroubles()
			},
			searchTroubles() {
				this.pageNum = 1
				this.pageSize = 10
				this.getTroubles()
			},
			getTroubles() {
				troubleList(this.queryParams).then(res => {
					this.troubles = res.rows
					this.count = res.total
					uni.stopPullDownRefresh();
				})
			},
		}
	}
</script>
<style>
	page {
		height: 101%;
	}
</style>
<style>
	.topInfo {
		margin: 30rpx auto 0rpx auto;
	}

	.search {
		background-color: #fff;
		height: 100rpx;
	}

	.baseBack {
		width: 92%;
		background-color: #fff;
	}

	.timeInfo {
		color: gray;
		font-size: 20rpx;
		margin-left: 20rpx;
	}
</style>
